<!DOCTYPE html>
<html xmlns:http="http://www.w3.org/1999/xhtml" xmlns: xmlns: lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"
    />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>福山-碰撞分析</title>
    <link rel="stylesheet" type="text/css" href="../assets/css/common.css"/>
    <link rel="stylesheet" type="text/css" href="../assets/css/elemet-ui.css"/>
    <link rel="stylesheet" type="text/css" href="../assets/css/rem.css"/>
    <link rel="stylesheet" href="../assets/css/repeat.css">
    <link rel="stylesheet" href="../assets/icons/iconfont.css">
    <link href="../assets/map/offlinemap/css/map.css" type="text/css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../assets/css/style.css"/>
</head>

<body class="bighome2">
<div id="app" v-cloak>
    <div class="pageTitle">
        <!--<ul class="tabUl">-->
        <!--<li :class="{'li_active':activeIndex === index}" v-for="(item, index) in menuList" :key="index"-->
        <!--@click="routerGo(item)">{{item.name}}-->
        <!--</li>-->
        <!--</ul>-->
        <div class="pageTitle-logo">
            <img src="../assets/images/logo.png"/>
            <a href="javascript:void(0)">福山公安数据治理系统</a>
        </div>
        <ul class="pageTitle-list">
            <li><a href="javascript:void(0)">全息档案<i class="el-icon-caret-bottom"></i></a></li>
            <li><a href="javascript:void(0)">警情研判<i class="el-icon-caret-bottom"></i></a></li>
            <li><a href="javascript:void(0)">风险防控<i class="el-icon-caret-bottom"></i></a></li>
            <li><a href="javascript:void(0)">分析工具<i class="el-icon-caret-bottom"></i></a></li>
            <li>
                <a href="javascript:void(0)">轨迹分析<i class="el-icon-caret-bottom"></i></a>
                <ul class="pageTitle-list-data">
                    <li><a href="trajectoryAnalysisCrash.html">碰撞分析</a></li>
                    <li><a href="trajectoryAnalysisPersonnel.html">人员轨迹</a></li>
                    <li><a href="trajectoryAnalysisAccompany.html">伴随分析</a></li>
                    <li><a href="trajectoryAnalysisTime.html">时间碰撞分析</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="pageNavigation">
        <div class="pageNavigation-dot">
        </div>
        <div class="pageNavigation-text">智能作战系统 > 轨迹分析 ></div>
        <div class="pageNavigation-txt">&nbsp;碰撞分析</div>
        <!--<el-button type="primary" size="mini" @click="window.location.href='bigHome.html'" style="position:absolute;right:5rem;">-->
        <!--重点人员管控-->
        <!--</el-button>-->
    </div>
    <div class="personnel-view">
        <div class="personnel-view-k">
            <div id="map_demo"></div>
            <!--任务列表-->
            <div class="crash-list-task">
                <div>
                    <h4>任务列表</h4>
                    <button>新建任务</button>
                </div>
                <ul class="cras-tk-list">
                    <li>
                        <div>
                        <h5>任务名称：911连环杀人案</h5>
                        <p>提交时间：2018-04-03  15：02：03</p>
                        </div>
                        <div>
                        <button>开始碰撞</button>
                        </div>
                    </li>
                    <li>
                        <div>
                        <h5>任务名称：911连环杀人案</h5>
                        <p>提交时间：2018-04-03  15：02：03</p>
                        </div>
                        <div>
                        <button class="active">碰撞中</button>
                        </div>
                    </li>
                    <li>
                        <div>
                        <h5>任务名称：911连环杀人案</h5>
                        <p>提交时间：2018-04-03  15：02：03</p>
                        </div>
                        <div>
                        <button class="active1">碰撞完成</button>
                        </div>
                    </li>
                    <li>
                        <div>
                        <h5>任务名称：911连环杀人案</h5>
                        <p>提交时间：2018-04-03  15：02：03</p>
                        </div>
                        <div>
                        <button class="active1">碰撞完成</button>
                        </div>
                    </li>
                    <li>
                        <div>
                        <h5>任务名称：911连环杀人案</h5>
                        <p>提交时间：2018-04-03  15：02：03</p>
                        </div>
                        <div>
                        <button class="active1">碰撞完成</button>
                        </div>
                    </li>
                    <li>
                        <div>
                        <h5>任务名称：911连环杀人案</h5>
                        <p>提交时间：2018-04-03  15：02：03</p>
                        </div>
                        <div>
                        <button class="active1">碰撞完成</button>
                        </div>
                    </li>
                    <li>
                        <div>
                        <h5>任务名称：911连环杀人案</h5>
                        <p>提交时间：2018-04-03  15：02：03</p>
                        </div>
                        <div>
                        <button class="active1">碰撞完成</button>
                        </div>
                    </li>
                    <li>
                        <div>
                        <h5>任务名称：911连环杀人案</h5>
                        <p>提交时间：2018-04-03  15：02：03</p>
                        </div>
                        <div>
                        <button class="active1">碰撞完成</button>
                        </div>
                    </li>
                </ul>
                <div class="flag">
                <i class="icon iconfont icon-dingwei1"></i>
                <i class="icon iconfont icon-dingwei2"></i>
                <i class="icon iconfont icon-dingwei3"></i>
                </div>
            </div>
            <!--新建任务-->
            <div class="crash-list-task crash-crh-new-task" style="display:none" >
                <div>
                    <h4>新建任务</h4>
                </div>
                <table>
                    <tr>
                        <td>任务名称：</td>
                        <td><input type="text"></td>
                    </tr>
                    <tr>
                        <td>碰撞列表：</td>
                        <td>
                            <button>
                                <i class="icon iconfont icon-weibiaoti--2"></i>
                                增加条件
                            </button>
                        </td>
                    </tr>
                </table>
                <div class="crh-condition-list">
                    <el-card class="box-card crash-track-card crh-card">
                        <div slot="header" class="clearfix">
                            <span>条件一：</span>
                        </div>
                        <div class="card-con">
                            <div  class="text item">
                                <div class="node-title">碰撞时间：</div>
                                <div class="node-content">
                                    <template>
                                        <div class="block">
                                            <el-date-picker
                                              v-model="value6"
                                              type="daterange"
                                              range-separator="至"
                                              start-placeholder="开始日期"
                                              end-placeholder="结束日期">
                                            </el-date-picker>
                                        </div>
                                    </template>
                                </div>
                                <div class="node-title">碰撞设备：</div>
                                <div class="node-content node-conten-bottom ">
                                    <input type="text" >
                                    <button>
                                        <i class="icon iconfont icon-icon-5"></i>
                                        添加
                                    </button>
                                    <button>
                                        <i class="icon iconfont icon-dingwei5"></i>
                                        地图选点
                                    </button>
                                </div>
                                <div class="show-text">

                                </div>
                            </div>
                        </div>
                    </el-card>
                    <el-card class="box-card crash-track-card crh-card">
                        <div slot="header" class="clearfix">
                            <span>条件一：</span>
                        </div>
                        <div class="card-con">
                            <div  class="text item">
                                <div class="node-title">碰撞时间：</div>
                                <div class="node-content">
                                    <template>
                                        <div class="block">
                                            <el-date-picker
                                              v-model="value6"
                                              type="daterange"
                                              range-separator="至"
                                              start-placeholder="开始日期"
                                              end-placeholder="结束日期">
                                            </el-date-picker>
                                        </div>
                                    </template>
                                </div>
                                <div class="node-title">碰撞设备：</div>
                                <div class="node-content node-conten-bottom ">
                                    <input type="text">
                                    <button>
                                        <i class="icon iconfont icon-icon-5"></i>
                                        添加
                                    </button>
                                    <button>
                                        <i class="icon iconfont icon-dingwei5"></i>
                                        地图选点
                                    </button>
                                </div>
                                <div class="show-text">

                                </div>
                            </div>
                        </div>
                    </el-card>
                </div>
        <span class="span-button">
            <button>清空</button>
            <button>保存</button>
        </span>
                <div class="flag">
                    <i class="icon iconfont icon-dingwei1 icon-active"></i>
                    <i class="icon iconfont icon-dingwei2"></i>
                    <i class="icon iconfont icon-dingwei3"></i>
                </div>
            </div>




            <div class="crh-content">
                <!--任务详情-->
                <div class="crash-list-result crash-list-task crash-track-details">
                    <div>
                        <h4>任务详情</h4>
                        <button><i class="icon iconfont icon-weibiaoti--27"></i></button>
                    </div>
                    <ul class="condition-code crash-track-details-title">
                        <li>
                            <div>任务名称：911连环杀人案路线跟踪</div>
                        </li>
                    </ul>
                    <template>
                        <div class="block crash-track-date crh-crash-title crash-track-date-first">
                            <span>碰撞列表：</span>
                        </div>
                    </template>
                    <div class="crh-condition-list">
                        <el-card class="box-card crash-track-card crh-card">
                            <div slot="header" class="clearfix">
                                <span>条件一：</span>
                            </div>
                            <div class="card-con">
                                <div  class="text item">
                                    <div class="node-title">碰撞时间：</div>
                                    <div class="node-content">
                                        <i class="icon iconfont icon-weibiaoti--23 date-icon"></i>
                                        <input type="text" class="date-input">
                                        至
                                        <i class="icon iconfont icon-weibiaoti--23 date-icon"></i>
                                        <input type="text" class="date-input">
                                    </div>
                                    <div class="node-title">碰撞设备：</div>
                                    <div class="node-content">
                                        <template>
                                            <el-radio  label="1">设备1.1</el-radio>
                                            <el-radio  label="2">设备1.1</el-radio>
                                            <el-radio  label="2">设备1.1</el-radio>
                                            <el-radio  label="2">设备1.1</el-radio>
                                            <el-radio  label="2">设备1.1</el-radio>
                                            <el-radio  label="2">设备1.1</el-radio>
                                            <el-radio  label="2">设备1.1</el-radio>
                                            <el-radio  label="2">设备1.1</el-radio>
                                            <el-radio  label="2">设备1.1</el-radio>
                                            <el-radio  label="2">设备1.1</el-radio>
                                            <el-radio  label="2">设备1.1</el-radio>
                                            <el-radio  label="2">设备1.1</el-radio>
                                            <el-radio  label="2">设备1.1</el-radio>
                                        </template>
                                    </div>
                                </div>
                            </div>
                        </el-card>
                        <el-card class="box-card crash-track-card crh-card">
                            <div slot="header" class="clearfix">
                                <span>条件一：</span>
                            </div>
                            <div class="card-con">
                                <div  class="text item">
                                    <div class="node-title">碰撞时间：</div>
                                    <div class="node-content">
                                        <i class="icon iconfont icon-weibiaoti--23 date-icon"></i>
                                        <input type="text" class="date-input">
                                        至
                                        <i class="icon iconfont icon-weibiaoti--23 date-icon"></i>
                                        <input type="text" class="date-input">
                                    </div>
                                    <div class="node-title">碰撞设备：</div>
                                    <div class="node-content">
                                        <template>
                                            <el-radio  label="1">设备1.1</el-radio>
                                            <el-radio  label="2">设备1.1</el-radio>
                                            <el-radio  label="2">设备1.1</el-radio>
                                            <el-radio  label="2">设备1.1</el-radio>
                                        </template>
                                    </div>
                                </div>
                            </div>
                        </el-card>
                    </div>
                </div>
                <!--碰撞特征分析-->
                <div class="crash-list-result crash-list-task crash-track-details" style="display:none">
                    <div>
                        <h4>碰撞特征分析</h4>
                        <button><i class="icon iconfont icon-weibiaoti--27"></i></button>
                    </div>
                    <ul class="condition-code crash-track-details-title crh-crash-title">
                        <li>
                            <div>碰撞特征分析
                                <i class="icon iconfont icon-xialasanjiao"></i>
                            </div>
                        </li>
                    </ul>
                    <ul class="condition-code crash-track-details-title crh-crash-title1">
                        <li>
                            <div>碰撞码特征列表</div>
                        </li>
                    </ul>
                    <template>
                        <el-select v-model="value" placeholder="请选择类型" class="crh-select-type">
                            <el-option
                              v-for="item in options"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                    <table class="crh-type-table">
                        <thead>
                        <tr class="crh-type-table-title">
                            <th><i class="icon iconfont icon-biaoqian"></i></th>
                            <th>特征码</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>IMSI</td>
                            <td>18616415416</td>
                            <td><button>一键查询</button></td>
                        </tr>
                        <tr>
                            <td>IMSI</td>
                            <td>18616415416</td>
                            <td><button>一键查询</button></td>
                        </tr>
                        <tr>
                            <td>IMSI</td>
                            <td>18616415416</td>
                            <td><button>一键查询</button></td>
                        </tr>
                        <tr>
                            <td>IMSI</td>
                            <td>18616415416</td>
                            <td><button>一键查询</button></td>
                        </tr>
                        <tr>
                            <td>IMSI</td>
                            <td>18616415416</td>
                            <td><button>一键查询</button></td>
                        </tr>
                        <tr>
                            <td>IMSI</td>
                            <td>18616415416</td>
                            <td><button>一键查询</button></td>
                        </tr>
                        <tr>
                            <td>IMSI</td>
                            <td>18616415416</td>
                            <td><button>一键查询</button></td>
                        </tr>
                        <tr>
                            <td>IMSI</td>
                            <td>18616415416</td>
                            <td><button>一键查询</button></td>
                        </tr>
                        <tr>
                            <td>IMSI</td>
                            <td>18616415416</td>
                            <td><button>一键查询</button></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!--滑块-->
            <div class="crash-slug"></div>
        </div>
    </div>

</div>
<!-- 引入组件库 -->
<script type="text/javascript" src="../scripts/vue/vue.js"></script>
<script src="../scripts/jquery-3.0.0.min.js.js"></script>
<script type="text/javascript" src="../scripts/element/element.js"></script>
<script type="text/javascript" src="../scripts/swiper/swiper-4.1.6.min.js"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/vue-awesome-swiper@3.1.2/dist/vue-awesome-swiper.js"></script>-->
<script type="text/javascript" src="../scripts/urls.js"></script>
<script src="../scripts/axios.min.js"></script>
<script type="text/javascript" src="../scripts/utils.js"></script>
<script src="../assets/map/offlinemap/map_load.js"></script>
<script src="../assets/map/layer/layer.js"></script>
<script src="../scripts/test.js"></script>
<script type="text/javascript">
    var vm=new Vue({
        el:'#app',
        data: {
            value6: '',
            value:'',
            value1:'',
            options:[{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }]
        },
        mounted:function(){
            this.data();
        },
        methods:{
            data:function(){
                let pickerOptions2={
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                }
            }
        }
    });
    // 百度地图API功能
    var map = new BMap.Map("map_demo");    // 创建Map实例
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 7);  // 初始化地图,设置中心点坐标和地图级别
    map.setCurrentCity("武汉");          // 设置地图中心显示的城市 new！
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    map.addControl(new BMap.NavigationControl());   //缩放按钮
    map.addControl(new BMap.MapTypeControl( {mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]} ));   //添加地图类型控件 离线只支持普通、卫星地图; 三维不支持
    //监听地图缩放
    map.addEventListener("zoomend", function(){
        if( this.getZoom() > 8 ) {
            layer.msg("默认只有8级地图, 超过无法显示");
        }
    });

    var cr = new BMap.CopyrightControl({anchor: BMAP_ANCHOR_TOP_LEFT});   //设置版权控件位置
    map.addControl(cr); //添加版权控件
    var bs = map.getBounds();   //返回地图可视区域
    // cr.addCopyright({id: 1, content: "<a href='http://www.xiaoguo123.com/p/baidumap_offline_v21?baidumap' style='font-size:20px;background:yellow;margin-left:60px'>离线地图API V2.1, 默认8级地图, 点击获取更多信息</a>", bounds: bs});
</script>
</body>

</html>